<template>
  <div>
    <div class="gva-search-box icey_bg">
      <el-row>
        <el-col :span="6">
          <el-form ref="searchForm" :model="searchForm">
            <el-form-item prop="search" label="模糊查询">
              <el-input v-model="searchForm.search" placeholder="请输入模糊查询" clearable/>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getProductPages" icon="Search" style="margin-left: 10px">
            查询
          </el-button>
        </el-col>
      </el-row>
      <div>
        <el-button type="primary" @click="dialogFormVisible = true;dialogMod = false;productForm = productFormInit" icon="Plus" round style="margin-left: 10px">
          新建组件
        </el-button>
      </div>
      <div>
        <el-table :data="tableData">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column align="left" label="组件名称" min-width="40" prop="name">
          </el-table-column>
          <el-table-column align="left" label="厂商" min-width="40" prop="provider">
          </el-table-column>
          <el-table-column align="left" label="备注" min-width="40" prop="remarks">
          </el-table-column>
          <el-table-column align="left" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button
                  icon="edit"
                  size="small"
                  type="primary"
                  link
                  @click="editProFunc(scope.row)"
              >编辑
              </el-button>
              <el-button
                  icon="delete"
                  size="small"
                  type="primary"
                  link
                  @click="deleteProFunc(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="gva-pagination">
        <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[15, 30, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
      <el-dialog v-model="dialogFormVisible" :title="dialogMod?'更新组件':'增添组件'">
        <template #default>
          <el-form :model="productForm">
            <el-row :gutter="20">
              <el-col :span="16" :offset="4">
                <el-form-item label="组件名称：" prop="name" required>
                  <el-input v-model="productForm.name" placeholder="请输入组件名称"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16" :offset="4">
                <el-form-item label="厂商：" prop="provider" >
                  <el-input v-model="productForm.provider" placeholder="请输入厂商"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16" :offset="4">
                <el-form-item label="备注：" prop="remarks" >
                  <el-input  :rows="2"
                             type="textarea"
                             v-model="productForm.remarks" max="20px"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="addProduct">
              {{dialogMod?'更新组件':'增添组件'}}
            </el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {createProduct, deleteProduct, getProductList, updateProduct} from "@/api/my/loophole/webapp";
import {ElMessage} from "element-plus";
import {createVul} from "@/api/my/loophole/vul";

export default {
  name: "vulnerablilitiseWebApp",
  data() {
    return {
      searchForm: {
        search: ''
      },
      pageSize: 15,
      page: 1,
      total: 0,
      tableData: [],
      dialogFormVisible: false,
      productForm: {
        id: '',
        name: '',
        provider: '',
        remarks: '',
      },
      productFormInit: null,
      dialogMod: false,
    }
  },
  mounted() {
    this.init()
    console.log(this.tableData)
  },
  methods: {
    init() {
      this.productFormInit = this.productForm
      this.getProductPages()
    },
    getProductPages() {
      getProductList({
        page: this.page,
        pagesize: this.pageSize,
        ...this.searchForm
      }).then(rep => {
        console.log(rep)
        this.tableData = rep.data.data
        this.total = rep.data.total
      })
    },
    deleteProFunc(item) {
      if (confirm("确定删除：" + item.name + " ?")) {
        // 用户单击了“确认”按钮，执行删除操作
        deleteProduct(item.id).then(res => {
          if (res.code == 0) {
            ElMessage.success('删除成功！')
            this.getProductPages()
            return
          } else {
            ElMessage.error(res.msg)
          }
        })
      } else {
        // 用户单击了“取消”按钮，不执行删除操作
        // ...

      }
    },
    editProFunc(item){
      this.dialogMod = true
      this.productForm = item
      this.dialogFormVisible = true
    },
    addProduct(){
      let res = {}
      if (this.productForm.id == ''){
        createProduct({
          name: this.productForm.name,
          provider: this.productForm.provider,
          remarks: this.productForm.remarks,
        }).then(resp =>{
          if (resp.code == 0){
            ElMessage.success('添加成功！')
            this.dialogFormVisible = false
            this.getProductPages()
          }else {
            ElMessage.error(resp.msg)
          }
        })
      } else {
        updateProduct(this.productForm,this.productForm.id).then(resp => {
          if (resp.code == 0){
            ElMessage.success('修改成功！')
            this.dialogFormVisible = false
            this.getProductPages()
          }else {
            ElMessage.error(resp.msg)
          }
        })
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getProductPages()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getProductPages()
    },

  }
}
</script>

<style scoped>

</style>